<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
</head>
<body>
	<canvas id="canvas-game" style="border: 1px solid black;" width="500" height="500"></canvas>
	<!-- <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> -->
	<script type="text/javascript" src="/client/js/socket.io-1.4.5.js"></script>
	<script type="text/javascript" src="/client/js/map_manager.js"></script>
	<script type="text/javascript" src="/client/js/terrain.js"></script>	
	<script type="text/javascript" src="/client/js/functions.js"></script>
	<script type="text/javascript">
	//CONSTANTS
	var canvas = document.getElementById("canvas-game");
	var ctx = document.getElementById('canvas-game').getContext('2d');
	var socket = io();
	var HEIGHT = 500;
	var WIDTH = 500;
	var selfId = null;
	var map = new MapManager();
	var img = new Image();
		img.src = '/client/img/sprites.png';

	var Player = function(initPack){
		var self = {};
		self.id = initPack.id;
		self.x = initPack.x;
		self.y = initPack.y;
		self.type = 'yellowTank1';
		self.typeX;
		self.typeY;
		self.direction = initPack.direction;
		self.equipment = initPack.equipment;
		self.hp = initPack.hp;
		self.update = function(){
			self.updateTank();
		}
		self.updateTank = function(){
			if(self.type === 'yellowTank1'){
				switch(self.direction){
					case 'up':
						self.typeX = 0;
						self.typeY = 0;
						break;
					case 'down':
						self.typeX = 64;
						self.typeY = 0;
						break;
					case 'left':
						self.typeX = 32;
						self.typeY = 0;
						break;
					case 'right':
						self.typeX = 96;
						self.typeY = 0;
						break;
				}
			}
			if(self.type === 'greenTank1'){
				self.typeX = 0;
				self.typeY = 128;
			}
		}
		self.draw = function(){
			var x = self.x;
			var y = self.y;
			ctx.drawImage(img,
				self.typeX,self.typeY, //Origin from the picture
				16,16, //Size from the picture
				x,y, //Position from the canvas to draw
				25,25 //Image size output
			);
		}
		Player.list[self.id] = self;
	}
	Player.list = {};
	var Bullet = function(initPack){
		var self = {};
		self.id = initPack.id;
		self.x = initPack.x;
		self.y = initPack.y;
		self.typeX;
		self.typeY;
		self.direction = initPack.direction;
		self.draw = function(){
			var x = self.x;
			var y = self.y;
			switch(self.direction){
				case 'up':
					ctx.drawImage(img,320,96,8,15,x+5,y-16,15,15);
					break;
				case 'down':
					ctx.drawImage(img,336,96,8,15,x+6,y+30,15,15);
					break;
				case 'left':
					ctx.drawImage(img,328,96,8,15,x-16,y+5,15,15);
					break;
				case 'right':
					ctx.drawImage(img,344,96,8,15,x+30,y+6,15,15);
					break;
			}
			
		}
		Bullet.list[self.id] = self;
		return self;
	}
	Bullet.list = {};
	socket.emit('newPlayer',{username:'Player 1',password: null,});

	socket.on('initialization',function(data){
		if(data.map) map = data.map;
		//map.data = data.map;
		selfId = data.id;
		for(var i in data.player){
			new Player(data.player[i]);
		}
		for(var i in data.bullet){
			new Bullet(data.bullet[i]);
		}
	});
	socket.on('mapUpdate',function(data){

	})
	socket.on('update',function(data){
		for(var i = 0; i < data.player.length; i++){
			var pack = data.player[i];
			var p = Player.list[pack.id];
			if(p){
				if(pack.x !== undefined){
					p.x = pack.x;
				}
				if(pack.y !== undefined){
					p.y = pack.y;
				}
				if(pack.direction !== undefined){
					p.direction = pack.direction;
				}
				if(pack.score !== undefined){
					p.score = pack.score;
				}
				if(pack.hp !== undefined){
					p.hp = pack.hp;
				}
				if(pack.map !== undefined){
					p.map = pack.map;
				}
			}
		}
		for(var i = 0; i < data.bullet.length; i++){
			var pack = data.bullet[i];
			var b = Bullet.list[pack.id];
			if(b){
				if(pack.x !== undefined){
					b.x = pack.x;
				}
				if(pack.y !== undefined){
					b.y = pack.y;
				}
			}
			
			
		}
	})
	socket.on('remove',function(data){
		for(var i in data.player){
			delete Player.list[data.player[i]];
		}
		for(var i in data.bullet){
			delete Bullet.list[data.bullet[i]];
		}
	})
	setInterval(function(){
		drawMap();
		for(var i in Player.list){
			Player.list[i].update();
			Player.list[i].draw();
		}
		for(var i in Bullet.list){
			Bullet.list[i].draw();
		}
 	},40);
</script>
</body>
</html>